<template>
  <div class="header">
    <div class="left">
      <span class="iconfont iconjiantou2" @click="$router.back()"></span>
      <span class="iconfont iconnew"></span>
    </div>
    <div class="btnFollowActive" v-if="!post.has_follow" @click="follow">关注</div>
    <div class="btnFollow" v-else-if="post.has_follow" @click="unfollow">已关注</div>
  </div>
</template>

<script>
export default {
  props: ["post"],
  mounted() {
    console.log(this.post);
  },
  methods: {
    follow() {
      this.$axios({
        url:'/user_follows/'+this.post.user.id,
        method:'get'
      }).then(res => {
          const {message} = res.data;
          console.log(message);
          if(message =='关注成功'){
              this.post.has_follow = true
          }
      });
    },
    unfollow() {
      this.$axios({
        url:'/user_unfollow/'+this.post.user.id,
        method :'get'
      }).then(res => {
          const {message} = res.data;
          console.log(message);
          
          if(message == '取消关注成功'){
              this.post.has_follow = false
          }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 13.889vw;
  align-items: center;
  padding: 0 5.556vw;
  .left {
    display: flex;
    align-items: center;
  }
  .iconnew {
    font-size: 13.889vw;
  }

  .btnFollowActive {
    padding: 2px 10px;
    border: 1px solid #f00;
    border-radius: 6.944vw;
    color: #fff;
    background: #f00;
  }
  .btnFollow {
    padding: 2px 10px;
    border: 1px solid #666;
    border-radius: 6.944vw;
    color: #888;
  }
}
</style>

